/* eslint-disable no-redeclare */
import './index.css';
//定义一个轮播图父类
class Banner {
    constructor({ root, btnClass = [], dotClass, listClass }) {
        this.root = document.querySelector(root);
        //左右按钮
        this.leftBtn = document.querySelector(btnClass[0]);
        this.rightBtn = document.querySelector(btnClass[1]);
        this.dots = document.querySelectorAll(dotClass);
        this.imgList = document.querySelectorAll(listClass);
        this.root.draggable = false;
    }
}

//定义一个网易云轮播图子类
class WyBanner extends Banner {
    constructor({ root, btnClass = [], dotClass, listClass }) {
        super({ root, btnClass, dotClass, listClass });
        //存储所有轮播图的类名
        this.classList = ['img-1', 'img-2', 'img-3', 'img-4'];
        //初始值
        this.index = 0;
        this.lastIndex = 0;
        this.btnChange();
        this.dotsClick();
    }
    //点击按钮左右切换事件

    btnChange() {
        this.rightBtn.addEventListener('click', rightHandle.bind(this));
        this.leftBtn.addEventListener('click', leftHandle.bind(this));
    }

    //点击小圆点重新排列数组
    dotsClick() {
        this.dots.forEach((el, index) => {
            el.addEventListener('click', () => {
                this.index = index;
                if (this.index != this.lastIndex) {
                    if (this.index > this.lastIndex) {
                        this.differen = this.index - this.lastIndex;
                        for (var i = 0; i < this.differen; i++) {
                            this.classList.unshift(this.classList.pop());
                            resetClass.call(this);
                            dotsColor.call(this);
                        }
                    } else {
                        this.differen = this.lastIndex - this.index;
                        for (var i = 0; i < this.differen; i++) {
                            this.classList.push(this.classList.shift());
                            resetClass.call(this);
                            dotsColor.call(this);
                        }
                    }
                }
            });
        });
    }
}
function rightHandle() {
    this.index++;
    //修改类名顺序
    //把数组的最后一位pop到第一位
    this.classList.unshift(this.classList.pop());
    resetClass.call(this);
    dotsColor.call(this);
}
function leftHandle() {
    this.index--;
    this.classList.push(this.classList.shift());
    resetClass.call(this);
    dotsColor.call(this);
}

function resetClass() {
    this.imgList.forEach((el, index) => {
        el.className = this.classList[index];
        el.firstElementChild.draggable = false;
    });
}

function dotsColor() {
    if (this.index === this.imgList.length) {
        this.index = 0;
    }
    if (this.index < 0) {
        this.index = this.imgList.length - 1;
    }
    this.dots[this.lastIndex].classList.remove('active');
    this.dots[this.index].classList.add('active');
    this.lastIndex = this.index;
}
let b1 = new WyBanner({
    root: '.box',
    btnClass: ['.arrow_left', '.arrow_right'],
    dotClass: '.dot_box > span',
    listClass: '.img_box > ul >li',
});
console.log(b1);
